<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML>
<html>
	<head>
		<title>医宝网</title>
		<%@ include file="/common/meta.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctx}/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="${ctx}/css/index.css"/>
		<script type="text/javascript" src="${ctx}/js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="section" id="function">
				<div class="header clearfix">
					<div class="functions" id="rolllink">
						<a href="#guide" id="toguide">使用指引</a>
						<a href="${ctx}/register.jsp">注册</a>
					</div>
				</div>
				<div class="login">
					<div class="logo">
						<img src="${ctx}/images/logo.png" width="275" height="95" alt="Our Logo" title="Logo" />
					</div>
					<div class="forms">
						<form action="user/login.html" class="clearfix" method="post">
							<div class="user bg">
								<a href="javascript:void(0)" id="getuser" class="usercus">用户</a>
								<ul id="usertypes">
									<li class="usercho" clas="usercus" id="user">用户</li>
									<li clas="userdoc" id="doctor">医生</li>
								</ul>
							</div>
							<div class="account bg">
								<input type="text" id="username" name="username"/>
								<label for="username">用户名</label>
							</div>
							<div class="pass bg">
								<input type="password" id="userpass" name="userpass"/>
								<label for="userpass">密码</label>
							</div>
							<a href="javascript:void(0)" onclick="login()" class="signin bg">登&nbsp;录</a>
							<a href="javascript:void(0)" onclick="" class="losepass">忘记密码 ？&nbsp;${info}</a>
						</form>
					</div>
				</div>
				<div class="foot">
					医宝网版权所有&nbsp;&nbsp;&copy;2012-2013&nbsp;&nbsp;<a href="#">京ICP备10217266号</a>&nbsp;&nbsp;<a href="#">联系我们</a>&nbsp;&nbsp;<a href="#">友情链接</a>
				</div>
			</div>
			<div class="section" id="guide">
				<a href="javascript:void(0);" class="backhome" id="back">返回主页</a>
				<div class="header clearfix">
					<div class="functions" id="rolllink">
						<a href="#">使用指引</a>
						<a href="#">注册</a>
					</div>
				</div>
				<div class="login">
					<div class="logo">
						<img src="${ctx}/images/logo.png" width="275" height="95" alt="Our Logo" title="Logo" />
					</div>
					<div class="forms">
						
					</div>
				</div>
				<div class="foot">
					医宝网版权所有&nbsp;&nbsp;&copy;2012-2013&nbsp;&nbsp;<a href="#">京ICP备10217266号</a>&nbsp;&nbsp;<a href="#">联系我们</a>&nbsp;&nbsp;<a href="#">友情链接</a>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
		$(document).ready(function(){
			// $('#rolllink a[href^=#]').click(function(){
			// 	var target = $(this.hash);
			// 	var h = target.offset().top;
			// 	if(target.length) {
			// 		$('html,body').animate({scrollTop:h},500);
			// 	}
			// 	return false;
			// });

			// 用户向导或公司简介的滚动效果
			$('#toguide').click(function(){
				$('#guide').show();
				$('#function').animate({marginTop:'-'+$('#guide').height()+'px'},500,function(){
					$('#function').hide();
				});
				return false;
			});
			$('#back').click(function(){
				$('#function').show();
				$('#function').animate({marginTop:0},500,function(){
					$('#guide').hide();
				});
				return false;
			});

			var userTypes = $('#usertypes');
			// 模仿下拉菜单
			$('#getuser').click(function(){
				$(this).next().fadeIn();
			});
			$(document).click(function(event){
		        if( $(event.target).attr('id') != 'getuser' ){
		            userTypes.fadeOut();
		        }
		    });
			// 模仿选择效果
			$('#usertypes>li').click(function(){
				var u = this;
				var li = $(u);
				var type = li.text();
				$('#getuser').text()==type?(function(){})() : (function(){
					$('#getuser').text(type).removeClass().addClass(li.attr('clas')); // 随登录用户类型更改样式
					document.forms[0].action = u.id+'\/login.html';
					li.addClass('usercho').siblings('li').removeClass('usercho');
				})();
			});

			// 输入文字后提示消失效果
			$('#username, #userpass').keyup(function(){
				var label = $(this).siblings('label');
				if($(this).val() === '') { // 绝对空：.replace(/(^\s*|\s*$)/gi,'')===''
					label.show();
				} else {
					label.hide();
				}
			});
			
		});
		
		function login(){
			document.forms[0].submit();
		};
		
		</script>
	</body>
</html>